<template>
    <div style="float: right">
        <el-dialog
                title="修改商品"
                :visible.sync="dialogShow"
                width="30%"
                :before-close="handleClose">
            <div class="contentSize">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="80px" size="mini" class="demo-ruleForm">
                    <el-form-item label="商品编号" prop="goodsname">
                        <el-input v-model="ruleForm.goodsid" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="商品名字" prop="goodsname">
                        <el-input v-model="ruleForm.goodsname"></el-input>
                    </el-form-item>
                    <el-form-item label="商品品牌" prop="goodsbrand" >
                        <el-select v-model="ruleForm.goodsbrand" placeholder="请选择活动区域">
                            <div v-for="goodsBrand in goodsBrands">
                                <el-option :label="goodsBrand" :value="goodsBrand"></el-option>
                            </div>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品价格" prop="goodsprice">
                        <el-input v-model="ruleForm.goodsprice"></el-input>
                    </el-form-item>
                    <el-form-item label="上架状态" prop="goodsstatus">
                        <el-select v-model="ruleForm.goodsstatus" placeholder="请选择上架状态">
                            <div v-for="(goodsStatus,index) in status">
                                <el-option :label="goodsStatus" :value="index+1"></el-option>
                            </div>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品标签" prop="goodslabel">
                        <el-select v-model="ruleForm.goodslabel" placeholder="请选择上架状态">
                            <div v-for="goodslabel in label">
                                <el-option :label="goodslabel" :value="goodslabel"></el-option>
                            </div>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
                        <el-button @click="cancleUpdate">取 消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "DiaLog",
        props:['dialogStatus'],
        data() {
            return {
                goodsBrands:this.$store.state.brands,
                status:this.$store.state.goodsSalesStatus,
                label:this.$store.state.labelMarks,
                dialogShow:false,
                ruleForm: {},
                rules: {
                    goodsname: [
                        { required: true, message: '请输入商品名称', trigger: 'blur' },
                        { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
                    ],
                    goodsbrand: [
                        { required: true, message: '请选择品牌', trigger: 'change' }
                    ],
                    goodsprice: [
                        {required: true, message: '请输入商品价格', trigger: 'blur' },
                    ],
                    goodsstatus: [
                        {required: true, message: '请选择是否上架', trigger: 'change' }
                    ],
                    goodslabel: [
                        { required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                    ]
                }
            };
        },
        beforeUpdate() {
            this.getDatas();
        },
        updated() {

        },
        methods: {
            cancleUpdate(){
                this.$parent.hiddenDialog();
            },
            getDatas(){
                this.ruleForm = this.$store.state.modifyData;
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        this.$parent.hiddenDialog();
                        done();
                    })
                    .catch(_ => {});
            },
            saveGoods(goods){
                this.$axios.post("/goods/update",goods).then(result=>{
                    this.addResult(result.data);
                    this.$parent.getDatas();
                    this.$parent.hiddenDialog();
                }).catch(err=>{
                    alert(err);
                })
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log(formName);
                        this.saveGoods(this.ruleForm);
                        // this.$router.push("/GoodsList");
                    } else {
                        console.log('数据有误!!');
                        return false;
                    }
                });
            },
            addResult(val) {
                this.$message({
                    showClose: true,
                    message: val===true?'恭喜你，修改成功！':'错了哦，修改失败！',
                    type: val===true?'success':'error'
                });
            },

        },
        watch:{
            dialogStatus(newValue,oldValue){
                this.dialogShow = newValue;
            }
        }
    }
</script>

<style scoped>
    .contentSize{
        padding: 30px;
        /*height: 550px;*/
        /*border: 1px solid red;*/
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        /*width: 800px;*/
        margin: auto;

    }
    .el-input{
        /*max-width: 3px;*/
    }
</style>